<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="UTF-8" />
    <title>${data.pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telphone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <jsp:include page="../comm/comm.jsp"/>

    <style type="text/css">
        body { min-width:320px;background:#fff; font:normal 18px/1.5 helvetica, 微软雅黑, verdana, san-serif;color:#333;}
        *{margin: 0;padding: 0;}
        .header {
            height: 45px;
            width: 100%;
            background-color: #f1130e;
            position: relative;
            line-height: 45px;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 2px
        }
        .fanhui{
            width: 17%;
            height: 100%;
            background: url(/images/fanhui.png) no-repeat;
            background-size: 55% 76%;
            background-position-y: 5px;
            float: left;
        }
        .qiandao{
            width: 100%;
            height: 228px;
            background-color: white;
            opacity: 0.4;
            box-shadow: 2px 2px 5px #f1130e;
        }
        i{
            font-style: normal;
        }
        .zl_0{
            width: 219px;
            height: 45px;
            margin: auto;
            margin-top: 73%;
            background: url(/images/zl_0.png) no-repeat;
            background-size: 100% 100%;
        }
        .zl_1{
            width: 219px;
            height: 45px;
            margin: auto;
            margin-top: 73%;
            background: url(/images/zl_1.png) no-repeat;
            background-size: 100% 100%;
        }
        .zl_2{
            width: 219px;
            height: 45px;
            margin: auto;
            margin-top: 73%;
            background: url(/images/zl_2.png) no-repeat;
            background-size: 100% 100%;
        }
        .zl_3{
            width: 219px;
            height: 45px;
            margin: auto;
            margin-top: 73%;
            background: url(/images/zl_3.png) no-repeat;
            background-size: 100% 100%;
        }
        .zl_num{
            width: 190px;
            height: 50px;
            margin: auto;
            background: url(/images/zl_button.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        .zl_tl{
            width: 92%;
            height: 262px;
            position: absolute;
            top: 200px;
            left: 15px;
            z-index: 9;
            background-color: white;
            display: none;
            border-radius: 10px;
        }
        .zl_dj{
            width: 174px;
            height: 50px;
            background: url(/images/zl_button.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        .zhezhao{
            width: 100%;
            height: 100%;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.3;
        }
        .ts_end{
            width: 80%;
            height: 180px;
            background-color: white;
            position: fixed;
            top: 37%;
            left: 39px;
            z-index: 8888;
            border-radius: 6px;
        }
        .button{
            width: 120px;
            height: 33px;
            border: none;
            background-color: #e40001;
            color: white;
            border-radius: 20px;
            margin: 21px 79px;
            font-size: 16px;
            line-height: 16px;
            outline:none;
        }
    </style>
</head>
<body style="background-image: url(/images/zl_bj.jpg);background-size: 100%;">
<div class="header">
    <div class="fanhui"></div>
    <div id="" style="width: 80%;">${data.title}</div>
</div>

<div class="zl_count">
    <c:if test="${zhuliCount=='0'}">
        <div class="zl_tp zl_0"></div>
    </c:if>
    <c:if test="${zhuliCount=='1'}">
        <div class="zl_tp zl_1"></div>
    </c:if>
    <c:if test="${zhuliCount=='2'}">
        <div class="zl_tp zl_2"></div>
    </c:if>
    <c:if test="${zhuliCount=='3'}">
        <div class="zl_tp zl_3"></div>
    </c:if>
    <div class="zl_num">帮他助力 <i class="zl_rs">${zhuliCount}</i>/3</div>
    <div style="text-align: center;margin-top: 12px;font-family: unset;font-weight: bold;">召集3位好友帮助您完成 （三次接力）</div>
    <div style="text-align: center;margin-top: 12px;font-family: unset;font-size: 14px">活动时间:${data.startDate}到${data.endDate}</div>
</div>

<div class="zhezhao" style="width: 100%; height: 100%; background-color: black; opacity: 0.3; position: fixed; top: 0px; display: none;"></div>
<div class="zl_tl">
    <div style="text-align: center;margin: 15px;color: #f1130e;font-size: 20px;">${data.title}</div>
    <div style="padding: 0px 20px;color: #666666;">
        ${data.content}
    </div>
    <div style="text-align: center;margin-top: 12px;">当前还差<i style="color: #f1130e;">${levzhuliCount}</i>位</div>
    <div class="zl_dj" id="${openId}">帮他助力</div>
</div>

<div class="zhezhao" style="display: none"></div>
<div class="ts_end" style="display: none">
    <p style="margin: 26px;" id="dateString">截止${data.endDate}  <span style="color: #e40001;">活动已结束 !</span></p>
    <p style="color: #888888;margin-left: 77px;margin-top: -8px;font-size: 16px;" id="jqqd">敬请期待</p>
    <button class="button" onclick="closePage()">点击关闭</button>
</div>
</body>
</html>
<script type="text/javascript">
    isOver('${data.status}','${data.startDate}','${data.endDate}')
    $(".zl_num").click(function(){
        $(".zhezhao").css('display','block');
        $(".zl_tl").css('display','block');
    })
    $(".zhezhao").click(function(){
        $(".zhezhao").css('display','none');
        $(".zl_tl").css('display','none');
    })
    $(".zl_dj").click(function(){
        $(".zhezhao").css('display','none');
        $(".zl_tl").css('display','none');
        config.commPost("/tasks/zhuli.json",{taskId:$(this).attr("id"),activityId:config.getQueryString("activityId")},function (data) {
            location.reload();
        })
        var num = $(".zl_rs").html();
        if( num == 0 ){
            $('.zl_tp').removeAttr('class');
            $('.zl_count').children('div').eq(0).addClass('zl_0');
        }else if( num == 1 ){
            $('.zl_tp').removeAttr('class');
            $('.zl_count').children('div').eq(0).addClass('zl_1');
        }else if( num == 2 ){
            $('.zl_tp').removeAttr('class');
            $('.zl_count').children('div').eq(0).addClass('zl_2');
        }else if( num == 3 ){
            $('.zl_tp').removeAttr('class');
            $('.zl_count').children('div').eq(0).addClass('zl_3');
        }
    })

</script>